<template>
    <div>
        <d-player id="videoElement" class="dd" ref="player" :options="dplayerOptions" @play="play"></d-player>
    </div>
</template>
 
<script>

// import DPlayer from 'dplayer'
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'
import flvjs from 'flv.js'

export default {
    name: 'liveDplay2',
    components: {
        'd-player': VueDPlayer
    },
    props: {
        url: {
            type: String,
            required: true
        },
    },
    data() {
        return {
            dplayerOptions: {
                live: true,     // 开启直播模式
                autoplay: true,     // 自动播放
                screenshot: true,   // 是否允许截图（按钮），点击可以自动将截图下载到本地
                // theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
                // loop: false,     // 是否自动循环
                // lang: 'zh-cn',   // 语言，'en', 'zh-cn', 'zh-tw'
                // hotkey: false,   // 是否支持热键，调节音量，播放，暂停等
                // preload: 'auto', // 自动预加载
                // volume: 0.7,     // 初始化音量
                // logo: require('@/assets/logo.jpg'),  // 在视频左脚上打一个logo
                // mutex: true,     // 互斥,阻止多个播放器同时播放
                preventClickToggle: true,    // 防止点击切换播放暂停
                video: {
                    type: "customFlv",
                    url: this.url, // 播放视频的路径 http://localhost:8080/live?port=1935&app=live&stream=canxiang-1
                    customType: {
                        customFlv: function (video, player) {
                            const flvPlayer = flvjs.createPlayer({
                                type: 'flv',
                                url: video.src,
                            });
                            flvPlayer.attachMediaElement(video);
                            flvPlayer.load();
                        },
                    },
                },
            },
        }
    },
    created() {
        // this.load();
    },
    mounted() {
        // console.log('this is current player instance object:', this.$refs.player);
    },
    methods: {
        // 获取所有的数据
        // async load() {
        //     const { data: res } = await getLiveDetail(this.$route.params.id);
        //     if (res.code !== '0') {
        //         return;
        //     }
        //     let url = res.data.liveUrl;
        //     let urlSub = url.slice(url.lastIndexOf("=") + 1);
        //     console.log(this.liveUrl + urlSub);
        //     this.dplayerOptions.video.url = this.liveUrl + urlSub;
        //     this.lock = true;
        // },
        play() {
            console.log('play callback')
        },
    },
}
</script>
 
<style>
.dd {
    width: 100%;
    height: 100%;
}
</style>